<template>
  <div class="taskcreatecom">
    <div class="searchcondition resultlist">
      <div
        style="position: absolute; top: 10px; left: 120px; cursor: pointer"
        @click="openPlot()"
      >
        <svg
          t="1709793288126"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4256"
          width="30"
          height="30"
        >
          <path
            d="M512.14 563.29c-18.94 0.61-36.71-9.14-46.35-25.45a51.937 51.937 0 0 1 0.02-52.88 51.878 51.878 0 0 1 46.38-25.4c27.98 0.94 50.17 23.9 50.16 51.89-0.01 28-22.23 50.94-50.21 51.84m108.31-51.84c-0.09-59.81-48.56-108.27-108.36-108.36-59.79 0.12-108.21 48.58-108.3 108.36 0.09 59.81 48.55 108.27 108.36 108.36 59.78-0.11 108.21-48.57 108.3-108.36"
            fill="#fff"
            p-id="4257"
          ></path>
          <path
            d="M980.52 481.32h-96.13C870.5 297.51 723.73 151.79 539.82 139.23V43.21c0-15.21-12.33-27.54-27.54-27.54-15.21 0-27.54 12.33-27.54 27.54v96.24c-181.78 15.05-325.66 159.98-339.4 341.87H41.45c-15.21 0-27.54 12.34-27.54 27.55s12.33 27.54 27.54 27.54h103.84c12.63 182.38 157.17 327.86 339.45 341.7V979.7c0 15.21 12.33 27.54 27.54 27.54 15.21 0 27.54-12.33 27.54-27.54V729.98c0-15.21-12.33-27.54-27.54-27.54-15.21 0-27.54 12.33-27.54 27.54v92.94c-151.82-13.66-271.82-134.54-284.36-286.46h90.78c15.21 0 27.54-12.33 27.54-27.54 0-15.21-12.33-27.54-27.54-27.54h-90.73c13.41-151.54 132.84-272.06 284.25-286.84v98.38c0 15.21 12.33 27.54 27.54 27.54 15.21 0 27.54-12.33 27.54-27.54v-98.61c153.56 12.31 275.88 133.55 289.54 287h-98.5c-15.21 0-27.54 12.34-27.54 27.55s12.33 27.54 27.54 27.54h249.71c15.21 0 27.54-12.34 27.54-27.54 0.01-15.2-12.32-27.54-27.53-27.54"
            fill="#fff"
            p-id="4258"
          ></path>
          <path
            d="M884.72 687.99l-16.03 16.03-37.89-37.89 16.03-16.08c10.64-10.04 27.25-10.04 37.89 0a26.673 26.673 0 0 1 7.93 18.97c0.01 7.12-2.85 13.96-7.93 18.97zM704.01 868.7l-37.9-37.85L795.83 701.1l37.89 37.89L704.01 868.7z m107.85-253.63l-33.49 33.54h-0.04L613.68 813.35a24.288 24.288 0 0 0-7.17 17.96l-10.14 76.43c-0.87 6.49 0.88 13.05 4.85 18.25a24.737 24.737 0 0 0 25.13 13.16l77.27-10.19c1.09-0.15 1.98-0.74 3.07-1.04a24.28 24.28 0 0 0 14.79-6.73L919.7 722.96c14.35-14.4 22.36-33.64 22.36-53.92 0-20.39-7.97-39.58-22.36-53.98-28.79-28.78-79.05-28.78-107.84 0.01z m0 0"
            fill="#fff"
            p-id="4259"
          ></path>
        </svg>
      </div>
      <el-scrollbar>
        <div class="fr" style="align-items: center; padding: 5px">
          <div style="width: 90px">标题：</div>
          <n-input
            style="width: 200px"
            v-model:value="imputobj.title"
            type="text"
            placeholder="请输入"
          />
        </div>
        <div class="fr" style="align-items: center; padding: 5px">
          <div style="width: 90px">创建人：</div>
          <n-input
            style="width: 200px"
            v-model:value="imputobj.create_user"
            type="text"
            placeholder="请输入"
          />
        </div>
        <div class="fr" style="align-items: center; padding: 5px">
          <div style="width: 90px">基地名称：</div>
          <n-input
            style="width: 200px"
            v-model:value="imputobj.port_name"
            type="text"
            placeholder="请输入"
          />
        </div>
        <div class="fr" style="align-items: center; padding: 5px">
          <div style="width: 90px">描述：</div>
          <n-input
            style="width: 200px"
            v-model:value="imputobj.content"
            type="textarea"
            placeholder="请输入"
          />
        </div>
        <div class="fr" style="align-items: center; padding: 5px">
          <div style="width: 90px">图片：</div>
          <br />
          <n-dynamic-input v-model:value="customValue" :on-create="onCreate">
            <template #create-button-default> 添加 </template>
            <template #default="{ value }">
              <div style="display: flex; align-items: center; width: 100%" class="frcc">
                <n-input style="width: 100px" v-model:value="value.string" type="text" />
                <div style="margin: 0px 5px">
                  <!-- <n-image width="30" :src="value.img" v-if="value.img != ''" /> -->
                  <el-image
                    style="width: 30px; height: 30px; display: flex !important"
                    class="frcc"
                    :src="value.img"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :hide-on-click-modal="true"
                    :preview-teleported="true"
                    :preview-src-list="getImgList(value)"
                    :initial-index="value.num"
                    fit="cover"
                  >
                    <template #error>
                      <div class="image-slot frcc" style="font-size: 20px">
                        <el-icon><icon-picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                  <!-- <svg
                  v-if="value.img == ''"
                    t="1701937948186"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4326"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M776 328m-72 0a72 72 0 1 0 144 0 72 72 0 1 0-144 0Z"
                      p-id="4327"
                      fill="#fff"
                    ></path>
                    <path
                      d="M999.904 116.608a32 32 0 0 0-21.952-10.912l-456.192-31.904a31.552 31.552 0 0 0-27.2 11.904l-92.192 114.848a32 32 0 0 0 0.672 40.896l146.144 169.952-147.456 194.656 36.48-173.376a32 32 0 0 0-11.136-31.424L235.616 245.504l79.616-125.696a32 32 0 0 0-29.28-49.024l-240.192 16.768a32 32 0 0 0-29.696 34.176l55.808 798.016a32.064 32.064 0 0 0 34.304 29.696l176.512-13.184c17.632-1.312 30.848-16.672 29.504-34.272s-16.576-31.04-34.304-29.536l-144.448 10.784-6.432-92.512 125.312-12.576a32 32 0 0 0 28.672-35.04 32.16 32.16 0 0 0-35.04-28.672l-123.392 12.416L82.144 149.184l145.152-10.144-60.96 96.224a32 32 0 0 0 6.848 41.952l198.4 161.344-58.752 279.296a30.912 30.912 0 0 0 0.736 14.752 31.68 31.68 0 0 0 1.408 11.04l51.52 154.56a31.968 31.968 0 0 0 27.456 21.76l523.104 47.552a32.064 32.064 0 0 0 34.848-29.632L1007.68 139.84a32.064 32.064 0 0 0-7.776-23.232z m-98.912 630.848l-412.576-39.648a31.52 31.52 0 0 0-34.912 28.768 32 32 0 0 0 28.8 34.912l414.24 39.808-6.272 89.536-469.728-42.72-39.584-118.72 234.816-310.016a31.936 31.936 0 0 0-1.248-40.192L468.896 219.84l65.088-81.056 407.584 28.48-40.576 580.192z"
                      p-id="4328"
                      fill="#fff"
                    ></path>
                  </svg> -->
                </div>
                <div style="cursor: pointer" @click="getImg(value)">
                  <svg
                    t="1701929343219"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4352"
                    width="30"
                    height="30"
                  >
                    <path
                      d="M835.3 250.9v522.3H188.7V250.9h646.6m49.8-49.8H138.9v621.8H885V201.1h0.1z"
                      p-id="4353"
                      fill="#fff"
                    ></path>
                    <path
                      d="M138.9 101.6v99.5H64.3v49.8H188.7V101.6zM885.1 922.4v-99.5h74.6v-49.8H835.3v149.3zM511 705.4H297.5c-7.8 0-20.4-2.9-23.3-7.8-2.9-4.9 1.9-16.5 5.8-23.3 26.2-39.8 53.4-79.6 79.6-119.4 8.7-12.6 17.5-13.6 31.1-7.8 44.6 21.4 90.3 42.7 135.9 64.1 12.6 5.8 28.1 1.9 35.9-9.7 24.3-37.9 49.5-74.7 75.7-111.6 4.9-6.8 13.6-17.5 20.4-17.5 7.8 0 13.6 12.6 16.5 20.4 24.3 60.2 47.6 121.3 70.9 181.5 9.7 25.2 5.8 31.1-23.3 31.1H511z m-78.6-298c0 29.1-25.2 52.4-54.4 51.4-29.1-1-51.4-23.3-51.4-51.4 0-29.1 24.3-52.4 54.4-51.4 27.1 0.9 51.4 24.2 51.4 51.4z"
                      p-id="4354"
                      fill="#fff"
                    ></path>
                  </svg>
                </div>
              </div>
            </template>
          </n-dynamic-input>
        </div>

        <div style="padding: 5px 0px">
          <el-button size="large" @click="handleGetReport" style="width: 100%" plain
            >获取结果</el-button
          >
        </div>

        <!-- <div>
          <el-progress
            :text-inside="true"
            :stroke-width="18"
            :percentage="jobpercent"
            status="success"
          />
        </div>
        <div style="padding: 5px 0px">
          <el-button size="large" @click="showresult" style="width: 100%" plain
            >下载</el-button
          >
        </div> -->
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch, reactive } from "vue";
import { useEarthStore } from "@/stores/earth";
import { Picture as IconPicture } from "@element-plus/icons-vue";

const earthStore = useEarthStore();
import { apiList } from "@/api/apiList";

import download from "./download.js";

import html2canvas from "html2canvas";

function onCreate() {
  return {
    isCheck: false,
    num: customValue.value.length,
    string: "港口",
    img: "",
  };
}

function getImgList(v) {
  // let res = customValue.value.filter(item => {
  //   return item.num != v.num
  // })
  // console.log(res);
  // return [v.img]
  // let res = customValue.value.filter(item => {
  //   return item.num != v.num
  // })
  // console.log(res);
  return customValue.value.map((item) => {
    return item.img;
  });
}

function openPlot(params) {
  delete earthStore.pannellist["determineplotpannel"];
  setTimeout(() => {
    earthStore.pannellist["determineplotpannel"] = {
      name: "determineplot-pannel",
      options: {
        // data: res.result
      },
    };
  }, 0);
}

let customValue = ref([
  {
    isCheck: true,
    num: 0,
    img: "",
    string: "概览",
  },
]);

let imputobj = reactive({
  title: "分析报告",
  create_user: "管理员",
  port_name: "横须贺港口",
  content:
    "日本横须贺港（35°17′N，139°39′E）是世界五大军港之一，驻有美海军和日海上自卫队重要武装力量。该基地能够容纳4艘核动力航母和其他各型舰艇150艘，也是美国海军第7舰队司令部、驻日美海军司令部的驻地。从战略上看，横须贺既是扼守东京的门户，又是美军在东北亚经营的岛屿链条中的重要一环，具有重要的战略意义。 根据xx年x月开源谷歌卫星影像判读，该时间段有2艘航母、7艘驱逐舰、3艘巡洋舰、5艘扫雷舰、1艘支援舰、2艘潜艇驻泊，基地西北部新日本海上自卫队司令部正在修建中。",
  img_files: "aaa",
  img_titles: "aaa",
});

function handleGetReport(params) {
  function base64ToBlob(base64Data) {
    const parts = base64Data.split(";base64,");
    const contentType = parts[0].split(":")[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { type: contentType });
  }

  let fd = new FormData();
  fd.append("title", imputobj.title);
  fd.append("create_user", imputobj.create_user);
  fd.append("port_name", imputobj.port_name);
  fd.append("content", imputobj.content);

  let names = [];
  customValue.value.map((item) => {
    fd.append("img_files", base64ToBlob(item.img), item.string);
    names.push(item.string);
  });
  fd.append("img_titles", names.join(","));
  apiList.monitorApi.createPdf(fd).then((res) => {
    if (res.code == '0') {
      // window.open(`/api/target/exportAllTargets/${exporttype}`)
      window.open(`/download/${res.result}`)
    }
    // download.pdf(res, imputobj.title);
  });
}

async function getImg(item) {
  const htmlText = document.getElementById("main");
  const canvas = await html2canvas(htmlText, {
    useCORS: true, // 使用跨域
  });
  let img = canvas.toDataURL("image/png");
  item.img = img;
  // var link = document.createElement("a");
  // link.href = img;
  // link.download = dayjs(new Date()).format("YYYY-MM-DD/HH:mm:ss");
  // link.click();
}

function closewindow() {}

defineExpose({
  closewindow,
});
</script>
<style lang="scss" scoped>
.resultlist {
  // height: calc(100% - 135px);
  height: calc(100%);
}

.eachlevelitem {
  border: 1px solid white;
  width: 25px;
  height: 30px;
  cursor: pointer;

  &:hover {
    background-color: #3333;
  }
}

.searchcondition {
  // border: ;
  border: 1px solid white;
  padding: 10px;
  // cursor: pointer;
  // margin: 10px;
  box-sizing: border-box;
  border-radius: 5px;
}

.taskcreatecom {
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  // display: flex;
}
</style>
